<template>
    <div class="appointment-record">
        <el-dialog title="预约记录" :visible.sync="dialogVisible" top="5vh">
            <div class="search-box-select">
                <el-form :model="searchform">
                    <el-form-item>
                        <el-select
                            v-model="searchform.shopid"
                            placeholder="请选择门店"
                            class="sele-w"
                            @change="changeList"
                        >
                            <el-option
                                v-for="item in shop_ls_data"
                                :key="item.shopid"
                                :label="item.name"
                                :value="item.shopid"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            v-model="searchform.staffid"
                            placeholder="请选择服务人"
                            class="sele-w"
                            @change="changeList"
                        >
                            <el-option
                                v-for="item in worker_ls_data"
                                :key="item.staffid"
                                :label="item.name"
                                :value="item.staffid"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            v-model="searchform.group"
                            placeholder="请选择日期"
                            @change="changeList"
                        >
                            <el-option
                                v-for="item in group_data"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>

            <div class="info-box">
                <div class="img-box">
                    <img
                        :src="
                            info_data.avatar
                                ? info_data.avatar
                                : require('../../static/images/Uimg.png')
                        "
                    />
                </div>
                <div class="info">
                    <div class="name">
                        <span>{{ info_data.name }}</span>
                    </div>
                    <div class="phone">
                        <span>{{ info_data.cellphone }}</span>
                    </div>
                </div>
            </div>

            <div class="list-box comm-list" v-infinite-scroll="loadFun">
                <div class="list" v-if="list_data.length > 0">
                    <div
                        class="list-row"
                        v-for="(item, index) in list_data"
                        :key="index"
                        @click="getDetailFun(item.bookid)"
                    >
                        <div class="num-tiem">
                            <span class="num">单号：{{ item.no }}</span>
                            <span class="tiem">时间：{{ item.atime_txt }}</span>
                        </div>
                        <div class="list-info">
                            <div
                                class="list-info-row"
                                v-for="(item_pro, index_por) in item.pro_list"
                                :key="index_por"
                            >
                                <div class="info name">
                                    <span>{{ item_pro.title }}</span>
                                </div>
                                <div class="info">
                                    <span>次数{{ item_pro.serv_qty }}</span
                                    ><span>单价{{ item_pro.serv_price }}</span
                                    ><span>时长{{ item.total_tlong }}</span>
                                </div>
                                <div class="info">
                                    <span>{{ item.shop_name }}</span
                                    ><span>{{ item.staff_info.name }}</span>
                                </div>
                                <div class="info">
                                    <span>{{
                                        `${item.h_from_txt} - ${item.h_to_txt}`
                                    }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <empty v-else />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import empty from "../comm/empty.vue";

export default {
    name: "appointmentRecord",
    components: { empty },
    data() {
        return {
            dialogVisible: false,
            searchform: {
                shopid: "",
                staffid: "",
                group: "",
                pnum: 20,
                pfrom: 0,
            },
            group_data: [
                {
                    name: "全部日期",
                    id: "",
                },
            ],
            shop_ls_data: [
                {
                    name: "全部门店",
                    shopid: "",
                },
            ],
            worker_ls_data: [
                {
                    name: "全部服务人",
                    staffid: "",
                },
            ],
            list_data: [],
            info_data: {},
            is_soll: false,
            customerid: "",
        };
    },
    methods: {
        // 初始化
        initData(id) {
            this.resetData();
            this.customerid = id;
            this.getListData();
        },
        // 查看预约详情
        getDetailFun(id) {
            this.dialogVisible = false;
            this.$emit("getDetailFun", id, true);
        },
        // 重置数据
        resetData() {
            this.dialogVisible = true;
            this.list_data = [];
            this.searchform.pfrom = 0;
            this.is_soll = false;
        },
        // 滚动加载
        loadFun() {
            if (this.is_soll) return;
            this.searchform.pfrom += 20;
            this.getListData();
        },
        // 选项搜索
        changeList() {
            this.resetData();
            this.getListData();
        },
        // 获取列表数据
        async getListData() {
            let url = config.YY_YUYUE_BOOK_RECORD_CUSTOMER;
            let param = this.searchform;
            param.customerid = this.customerid;
            let res = await this.$api({ url: url, data: param });
            if (res.data.config && res.data.config.group) {
                this.group_data =
                    this.group_data.length == 1
                        ? this.group_data.concat(res.data.config.group)
                        : this.group_data;
            }

            if (res.data.config && res.data.config.shop_ls) {
                this.shop_ls_data =
                    this.shop_ls_data.length == 1
                        ? this.shop_ls_data.concat(res.data.config.shop_ls)
                        : this.shop_ls_data;
            }

            if (res.data.config && res.data.config.worker_ls) {
                this.worker_ls_data =
                    this.worker_ls_data.length == 1
                        ? this.worker_ls_data.concat(res.data.config.worker_ls)
                        : this.worker_ls_data;
            }
            if (res.data.info) {
                this.info_data = res.data.info;
            }
            if (res.data.ls) {
                this.list_data = this.list_data.concat(res.data.ls);
            } else {
                this.is_soll = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.appointment-record {
    ::v-deep.search-box-select {
        .el-form {
            display: flex;
        }
        .sele-w {
            margin-right: 10px;
        }
    }
    .info-box {
        border: 1px #e8dcdc solid;
        border-radius: 5px;
        padding: 5px;
        display: flex;
        margin-bottom: 10px;
        .img-box {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: 0.8;
            }
        }
        .info {
            .name {
            }
        }
    }
    .list-box {
        height: 500px;
        overflow: auto;
        .list-row {
            border-radius: 5px;
            border: 1px #e8dcdc solid;
            margin-bottom: 10px;
            cursor: pointer;
            &:hover {
                background: #f7f7f7;
            }
            .num-tiem {
                padding: 0 10px;
                height: 40px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px #e8dcdc solid;
                align-items: center;
                .num {
                    font-size: 14;
                }
                .tiem {
                    font-size: 12px;
                }
            }
            .list-info {
                padding: 0 10px;
                padding-top: 5px;
                .list-info-row {
                    margin-bottom: 10px;
                    border-bottom: 1px #e8dcdc solid;
                    &:last-child {
                        border: none;
                    }
                    .info {
                        margin-bottom: 5px;
                        &:last-child {
                            margin-bottom: 10px;
                        }
                        font-size: 12px;
                        span {
                            margin-right: 20px;
                        }
                        &.name {
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}
</style>